<script>
export default {
	props: {
		text: {
			type: String,
			default: 'Hello World',
		},
	},

	data() {
		return {};
	},
};
</script>

<template>
	<div class="box">
		<span class="tip">{{ text }}</span>
	</div>
</template>

<style scoped>
@keyframes shine {
	from {
		background-position: 0% 0%;
	}

	to {
		background-position: 150% 100%;
	}
}

.box {
	width: 200px;
	height: 100px;
	border-radius: 5px;
	font-weight: bold;
	background-color: black;
	display: flex;
	align-items: center;
	justify-content: center;

	.tip {
		font-size: 30px;
		background: #585757 linear-gradient(to left, transparent, #fff, transparent)
			no-repeat 0 0;
		background-size: 40% 100%;
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		animation: shine 1s infinite;
	}
}
</style>
